<template>
  <el-form ref="formRef" :model="form" :rules="rules" :show-message="false" label-width="100px" size="default" label-suffix="：">
    <el-row>
      <el-col :span="24">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="权限字符" prop="roleCode">
          <el-input v-model="form.roleCode" placeholder="请输入权限字符"></el-input>
        </el-form-item>
      </el-col>
<!--      <el-col :span="24">-->
<!--        <el-form-item label="状态">-->
<!--          <el-radio-group v-model="form.status">-->
<!--            <el-radio :label="0">正常</el-radio>-->
<!--            <el-radio :label="1">停用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="菜单权限">-->
<!--          <div>{{ "当前已选中" + form.menuList.length + "个菜单" }}</div>-->
<!--          <div class="pointer" @click="setAuth">去设置</div>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
      <el-col :span="24">
        <el-form-item label="权限描述">
          <el-input v-model="form.roleDesc" :rows="3" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="x-form">
import useStore from '@/stores/modules/sys/role';
const sysRole = useStore();

import XMenu from "./Menu.vue"
import {reactive, ref} from "vue";

const formRef = ref()

const form = reactive({
  roleName: "",
  roleCode: "",
  // status: 0,
  dsType: 0,
  roleDesc: "",
  menuList: []
})

const rules = ref({
  roleName: { required: true, message: '角色名称不能为空', trigger: 'click'},
  roleCode: { required: true, message: '权限字符不能为空', trigger: 'click'},
})

/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    callback(form)
  })
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    // if (Helper.emptyArray(form.menuList)) {
    //   Msg.confirm("当前角色没有设置任何菜单权限，是否前往设置菜单权限？", {confirmText: "去设置", cancelText: "保存"}).then(async _ => {
    //     await setAuth()
    //   }).catch(action => {
    //     if (action == "cancel") {
    //       doSave(form)
    //     }
    //   })
    //   return
    // }

    await doSave(form)
  })
}

const doSave = async (form) => {
  let result = null
  result = form.roleId ? await sysRole.modify(form) : await sysRole.add(form)
  if (result) {
    Dialog.close()
  }
}

const setAuth = async () => {
  const op = Dialog.open(XMenu, "授权")
  op.setWidth(1100)
  op.autoClose(true)

  op.mounted(c => {
    c.render(form.menuList)
  })

  op.confirm(c => {
    form.menuList = c.getData()
  })
}

/**
 * 获取数据
 * @param data
 */
const render = (data) => {
  if (! Helper.empty(data)) {
    for (let key in data) {
      form[key] = data[key]
    }
  }
}

defineExpose({ render, submit })
</script>

<style scoped lang="less">
.pointer {
  color: #2d82eb;
  margin-left: 10px;
  cursor: pointer
}

.pointer:hover {
  text-decoration: underline;
}
</style>
